<template>
  <view
    class="user-card"
    @click="onCardClick"
    :style="{
      width: px2rpx2px(props.width),
      height: px2rpx2px(props.height),
      color: props.color,
      backgroundColor: props.bgColor,
      borderRadius: px2rpx2px(props.borderRadius),
    }"
  >
    <image class="user-avatar" :src="props.info.icon" />
    <view class="user-info">
      <view style="font-size: 16px; line-height: 23px">{{
        props.info.nickname || "未授权"
      }}</view>
      <view style="font-size: 12px; line-height: 23px">{{
        (props.info.memberScore &&
          `${props.info.memberScore.levelName}VIP.${props.info.memberScore.level}`) ||
        "点击注册"
      }}</view>
    </view>
    <view class="integral">
      <view class="integral-text"
        >【积分】
        {{
          (props.info.memberScore && props.info.memberScore.surplusScore) || 0
        }}</view
      >

      <view
        class="integral-btn"
        :style="{
          color: props.integralColor,
          backgroundColor: props.integralBgColor,
        }"
        @click.stop="onIntegralClick"
        >积分兑换</view
      >
    </view>
  </view>
</template>

<script>
const propConfig = {
  name: {
    type: String,
    default: "CustomCard",
  },
  width: {
    label: "卡片宽度",
    type: String,
    default: "330px",
    editType: "el-input",
  },
  height: {
    label: "卡片高度",
    type: String,
    default: "81px",
    editType: "el-input",
  },
  color: {
    label: "字体颜色",
    type: String,
    default: "rgba(0, 0, 0, .8)",
    editType: "el-color-picker",
  },
  bgColor: {
    label: "背景色",
    type: String,
    default: "white",
    editType: "el-color-picker",
  },
  borderRadius: {
    label: "卡片圆角",
    type: String,
    default: "0px",
    editType: "el-input",
  },
  integralColor: {
    label: "积分兑换按钮字体颜色",
    type: String,
    default: "rgba(255, 255, 255, 1)",
    editType: "el-color-picker",
  },
  integralBgColor: {
    label: "积分兑换按钮背景色",
    type: String,
    default: "rgba(0, 145, 255, 0.8)",
    editType: "el-color-picker",
  },
};
</script>

<script setup>
import { defineProps, defineEmits } from "vue";
import { px2rpx2px } from "../utils/index.js";

const emits = defineEmits(["onCardClick", "onIntegralClick"]);

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
  ...propConfig,
});

const onCardClick = () => {
  emits("onCardClick");
};

const onIntegralClick = () => {
  emits("onIntegralClick");
};
</script>

<style lang="scss" scoped>
.user-card {
  width: 330px;
  height: 81px;
  background-size: 100%;
  background-position: top left;
  background-repeat: no-repeat;
  margin: 0 auto;
  border-radius: 25rpx;
  background: rgba(240, 248, 254, 0.75);
  color: #2c6daf;
  display: flex;
  align-items: center;
  padding: 0 22px;
  box-sizing: border-box;
  font-size: 16px;
  .user-avatar {
    width: 56px;
    height: 56px;
    background-color: white;
    border-radius: 56px;
    margin-right: 6px;
  }

  .user-info {
    flex: 1 1 0%;
  }
}

.integral {
  display: flex;
  align-items: center;
  flex-direction: column;
  .integral-text {
    margin-bottom: 5px;
    line-height: 1;
  }
  .integral-btn {
    width: 76.5px;
    height: 19px;
    font-size: 12px;
    line-height: 19px;
    color: #fff;
    text-align: center;
    box-shadow: 0px 2px 1px 0px rgba(255, 255, 255, 0.49);
    border-radius: 19px;
    margin-top: 6px;
  }
}
</style>
